<template>
    <div class="demo-date-picker">
        <div class="block">
        <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
        <el-select
            v-model="chooseNameList"
            multiple
            collapse-tags
            placeholder="请选择添加者"
            style="width: 200px; margin: 0 10px;"
            size="large"
        >
            <el-option v-for="item in usernameList" :key="item" :label="item" :value="item"/>
        </el-select>
        <el-button :icon="Search" circle class="searcnBtn" @click="getData()"/>
        </div>
    </div>
    <hr style="background-color: #e8e8e8; height: 2px; border: none" />
    <el-tabs tab-position="left" style="height: 70%" class="demo-tabs">
        <el-tab-pane label="明细">
            <el-table :data="revexpData" height="600" style="width: 100%">
                <el-table-column prop="adder" label="添加者"  />
                <el-table-column prop="money" label="金额" />
                <el-table-column prop="typeName" label="类型" />
                <el-table-column prop="date" label="日期" />
                <el-table-column prop="describes" label="描述" />
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="折线图">
            <div id="echartsPic" :style="{ width: '1000px', height: '400px' }">

            </div>
        </el-tab-pane>
    </el-tabs>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { getByDate } from '@/api/revexp';
import { getNameList } from '@/api/user';
import * as echarts from 'echarts';

const dateValue = ref('');
const revexpData = ref([]);
const usernameList = ref([]);
const chooseNameList = ref([]);

const datePic = {
    option : {
        xAxis: {
            type: 'category',
            data: [], //x轴坐标点
        },
        yAxis: {
            type: 'value',
            name: '收入'
        },
        series: [
            {
                data: [],//数据
                type: 'line',
                label: {
                    normal: {
                        show: true //具体值
                    }
                }
            }
        ]
    }
}

var datePicObj = ref();

const getData = ()=> {
    dateValue.value[1] = dateValue.value[1].replace('00:00:00','23:59:59');
    getByDate(JSON.stringify(dateValue.value),JSON.stringify(chooseNameList.value)).then((res)=>{
        revexpData.value = res.data;
        //绘图
        calcDaily(res);
        datePicObj.setOption(datePic.option);
    })
}

const calcDaily = (data) => {
    datePic.option.series[0].data = [];
    let dateSet = new Set(data.data.map(item => item.date));
    datePic.option.xAxis.data = Array.from(dateSet);
    dateSet.forEach(oneDate => {
        let dateMoney = data.data.filter(item => item.date == oneDate);
        let total = 0;
        dateMoney.map(item => {
            item.type == 0 ? total += item.money : total -= item.money;
        })
        datePic.option.series[0].data.push(total);
    })
}

onMounted(() => {
    datePicObj = echarts.init(document.getElementById('echartsPic'));
    getNameList().then(res => usernameList.value = res.data);
})
</script>

<style scoped> 
:deep(.el-range-editor--large.el-input__wrapper) {
    vertical-align: middle;
}

:deep(.el-table .el-table__cell) {
    text-align:center;
}
.demo-date-picker .block {
padding: 5px 25px;
}
.searcnBtn {
    margin: 0 10px;
}
</style>
  